<template>
  <div>
    <div class="">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span v-if="type == 2">同住汇总</span>
          <span v-if="type == 3">联房汇总</span>
          <!-- <el-button style="float: right; padding: 3px 0">打印</el-button> -->
        </div>
        <el-table :data="dateList" border v-loading="dataListLoading" style="width: 100%;">
          <el-table-column prop="name" header-align="center" align="center" label="姓名"></el-table-column>
          <el-table-column header-align="center" align="center" label="房号">
            <template slot-scope="scope">
              <span>{{ scope.row.roomSign }}{{ scope.row.roomNum }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="roomNamename" header-align="center" align="center" label="房型">
            <template slot-scope="scope">
              <span>{{ scope.row.roomNamename }}</span>
            </template>
          </el-table-column>

          <el-table-column header-align="center" align="center" label="入住时间">
            <template slot-scope="scope">
              <span>{{ scope.row.arrivalsTime }}</span>
            </template>
          </el-table-column>

          <el-table-column header-align="center" align="center" label="关系">
            <template slot-scope="scope">
              <span v-if="scope.row.isRoomMain == 1 && scope.row.singleMain == 1">主单</span>
              <span v-else>从单</span>
            </template>
          </el-table-column>

          <el-table-column header-align="center" align="center" label="状态">
            <template slot-scope="scope">
              <!-- 退房(0已结退房1正常入住2未结退房3联房退房) -->
              <span v-if="scope.row.state == 0">已结退房</span>
              <span v-if="scope.row.state == 1">正常入住</span>
              <span v-if="scope.row.state == 2">未结退房</span>
              <span v-if="scope.row.state == 3">联房退房</span>
            </template>
          </el-table-column>

           <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
              <div v-if="type == 3">
                <el-button v-if="scope.row.isRoomMain == 1 && scope.row.singleMain == 1 && count > 1" @click="removeAllLinkedRooms(scope.row)" type="text" size="small">解除全部</el-button>
                <el-button v-if="scope.row.isRoomMain == 1 && scope.row.singleMain != 1 && count > 1" @click="removeLinkedRooms(scope.row)" type="text" size="small">解除联房</el-button>
                <el-button v-if="scope.row.isRoomMain == 1 && scope.row.singleMain != 1 && count > 1" @click="setLinkedMainRoom(scope.row)" type="text" size="small">设为主单</el-button>
              </div>
              <div v-if="type == 2">
                <el-button v-if="scope.row.isRoomMain == 1 && scope.row.singleMain == 1 && dateList.length > 1" @click="setMainRoom(scope.row)" type="text" size="small">设为主单</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    data() {
      return {
        roomIds: [],
        type: 2,
        singleId: null,
        count: 0,
        dataListLoading: false,
        dateList: []
      };
    },
    methods: {
      //解除全部联房
      removeAllLinkedRooms(row){
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinpeople/removeAllLinkedRooms`),
          method: 'get',
          params: this.$http.adornParams({
            id: row.id
          })
        }).then(({
          data
        }) => {
          this.dataListLoading = false;
          if (data && data.code === 0) {
            this.$emit("refreClosing");
            this.$nextTick(()=>{
              this.getInfo();
            })
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      //解除联房
      removeLinkedRooms(row){
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinpeople/removeLinkedRooms`),
          method: 'get',
          params: this.$http.adornParams({
            id: row.id
          })
        }).then(({
          data
        }) => {
          this.dataListLoading = false;
          if (data && data.code === 0) {
            this.$emit("refreClosing");
            this.$nextTick(()=>{
              this.getInfo();
            })
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      //设为联房主单
      setLinkedMainRoom(row){
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinpeople/setLinkedMainRoom`),
          method: 'get',
          params: this.$http.adornParams({
            id: row.id
          })
        }).then(({
          data
        }) => {
          this.dataListLoading = false;
          if (data && data.code === 0) {
            this.$nextTick(()=>{
              this.getInfo();
            })
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      //设为主同住人
      setMainRoom(row){
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinpeople/setMainRoom`),
          method: 'get',
          params: this.$http.adornParams({
            id: row.id
          })
        }).then(({
          data
        }) => {
          this.dataListLoading = false;
          if (data && data.code === 0) {
            this.$nextTick(()=>{
              this.getInfo();
            })
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      init2(info) {
        this.type = info.type;
        this.roomIds = info.roomIds;
        this.singleId = info.singleId;
        this.$nextTick(() => {
          this.getInfo();
        });
      },
      getInfo() {
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/pop_single_roomids`),
          method: 'get',
          params: this.$http.adornParams({
            roomIds: this.roomIds,
            singleId: this.singleId
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dateList = data.data.peopleEntities;
            this.count = data.data.count;
          } else {
            this.$message.error(data.msg);
          }
          this.dataListLoading = false;
        });
      }
    }
  };
</script>

<style>
  .checkin_info_summary table th {
    padding-top: 15px;
    color: #666;
    text-align: center;
  }

/*  .checkin_info_summary table tr th:last-of-type {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background: #f24e4c;
    color: #fff;
  }

  .checkin_info_summary table tr td:last-of-type {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #f24e4c;
    color: #fff;
  } */

  .checkin_info_summary table td {
    height: 48px;
    color: #151515;
    text-align: center;
  }
</style>
